<template>
  <div class="FG-style">
    <!-- 全局样式选择框 -->
    <el-form-item label="className">
      <el-select v-model="style.className" multiple placeholder="请选择">
        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name"></el-option>
      </el-select>
    </el-form-item>
    <SpaceConfig v-model="style" style="margin-bottom:22px" :disabled="disabled" />
    <el-form-item label="颜色">
      <InputColor v-model="style.color" />
    </el-form-item>
    <el-form-item label="背景颜色">
      <InputColor v-model="style.backgroundColor" />
    </el-form-item>
    <el-form-item label="透明度">
      <el-slider v-model="style.opacity" :min="0" :max="1" :step="0.1"></el-slider>
    </el-form-item>
    <el-form-item label="缩放" style="margin-bottom:0">
      <el-slider v-model="style.scale" :min="0" :max="2" :step="0.1"></el-slider>
    </el-form-item>
    <el-form size="mini" label-position="left" label-width="100px" :disabled="disabled">
      <el-collapse v-model="activeNames" style="margin-bottom:22px">
        <el-collapse-item title="边框" name="1" v-if="style.border!==undefined">
          <div slot="title" class="SC-collapse-title">
            <span>边框</span>
            <span :style="style.border">样式预览</span>
          </div>
          <el-form-item label="边框样式" size="mini">
            <el-select v-model="style.border.borderStyle" :style="{ width: '100%' }" clearable>
              <el-option
                v-for="item in selectOptions['borderStyle']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="边框宽度">
            <InputNumber v-model="style.border.borderWidth" unit="px" min="0" />
          </el-form-item>
          <el-form-item label="边框颜色">
            <InputColor v-model="style.border.borderColor" />
          </el-form-item>
          <el-form-item label="圆角">
            <InputNumber v-model="style.border.borderRadius" :units="units" min="0" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="字体" name="3" v-if="style.font!==undefined">
          <div slot="title" class="SC-collapse-title">
            <span>字体</span>
            <span :style="style.font">样式预览</span>
          </div>
          <el-form-item label="文字大小">
            <InputNumber v-model="style.font.fontSize" :units="units" />
          </el-form-item>

          <el-form-item label="文字粗细">
            <el-select v-model="style.font.fontWeight" :style="{ width: '100%' }">
              <el-option label="正常" value="normal" />
              <el-option label="粗体" value="bold" />
              <el-option label="特粗体" value="bolder" />
              <el-option label="细体" value="lighter" />
            </el-select>
          </el-form-item>
          <el-form-item label="对齐方式">
            <el-select v-model="style.font.textAlign" :style="{ width: '100%' }" clearable>
              <el-option
                v-for="item in selectOptions['textAlign']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文字间距">
            <InputNumber v-model="style.font.letterSpacing" :units="units" />
          </el-form-item>
          <el-form-item label="文字行高">
            <!-- <el-input-number
              v-model="style.font.lineHeight"
              :precision="1"
              :step="0.5"
              controls-position="right"
              :min="1"
              :max="10"
              :style="{ width: '100%' }"
            ></el-input-number>-->
            <InputNumber v-model="style.font.lineHeight" :units="units" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="修饰" name="4" v-if="style.textDecoration!==undefined">
          <div slot="title" class="SC-collapse-title">
            <span>修饰</span>
            <span :style="style.textDecoration">样式预览</span>
          </div>
          <el-form-item label="线条类型">
            <el-select
              v-model="style.textDecoration.textDecorationLine"
              :style="{ width: '100%' }"
              clearable
            >
              <el-option
                v-for="item in selectOptions['textDecorationLine']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="线条样式">
            <el-select
              v-model="style.textDecoration.textDecorationStyle"
              :style="{ width: '100%' }"
              clearable
            >
              <el-option
                v-for="item in selectOptions['textDecorationStyle']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="线条颜色">
            <InputColor v-model="style.textDecoration.textDecorationColor" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="阴影" name="5" v-if="style.boxShadow!==undefined">
          <div slot="title" class="SC-collapse-title">
            <span>阴影</span>
            <!-- <el-input v-model="style.boxShadow"></el-input> -->
            <span :style="{boxShadow:style.boxShadow}">样式预览</span>
          </div>
          <ShadowConfig v-model="style.boxShadow" />
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import SpaceConfig from "./SpaceConfig.vue";
import ShadowConfig from "./ShadowConfig";
import InputNumber from "../huComponents/InputNumber";
import InputColor from "../huComponents/InputColor";
export default {
  components: {
    SpaceConfig,
    ShadowConfig,
    InputNumber,
    InputColor,
  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    list: {
      type: Array,
      default: () => [],
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fontSize: "",
      letterSpacing: 0,
      activeNames: [],
    };
  },
  mounted() {},
  computed: {
    units() {
      return ["px", "em", "rem", "%"];
    },
    selectOptions() {
      return {
        borderStyle: [
          { value: "solid", label: "实线" },
          { value: "dashed", label: "虚线" },
          { value: "dotted", label: "点状虚线" },
          { value: "double", label: "双实线" },
          { value: "groove", label: "3D 凹槽" },
          { value: "ridge", label: "3D 垄状" },
          { value: "inset", label: "3D 嵌入" },
          { value: "outset", label: "3D 突出" },
        ],
        textAlign: [
          { label: "左对齐", value: "left" },
          { label: "居中对齐", value: "center" },
          { label: "右对齐", value: "right" },
          { label: "两端对齐", value: "justify" },
        ],
        textDecorationLine: [
          { label: "下划线", value: "underline" },
          { label: "上划线", value: "overline" },
          { label: "删除线", value: "line-through" },
        ],
        textDecorationStyle: [
          { label: "单实线", value: "solid" },
          { label: "双实线", value: "double" },
          { label: "点虚线", value: "dotted" },
          { label: "虚线", value: "dashed" },
          { label: "波浪线", value: "wavy" },
        ],
      };
    },
    style: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>

<style lang="scss" >
.FG-style {
  .el-collapse-item__header,
  .el-collapse-item__wrap,
  .el-collapse {
    border: none;
  }
  .el-collapse-item__content {
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 5px;

    .el-form-item:last-child {
      margin-bottom: 0;
    }
  }
  .SC-collapse-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    span:nth-child(2) {
      // background: rebeccapurple;
      width: 162px;
      box-sizing: border-box;
      color: #666666;
      text-align: center;
      font-size: 14px;
      line-height: 1;
    }
  }
}
</style>
